﻿@namespace MudBlazor.Docs.Shared

<MudCard Elevation="25">
    <MudCardHeader Class="rounded-t pa-3" Style="background: transparent linear-gradient(90deg,#594AE2 0%, #FF4081 100%) 0% 0% no-repeat padding-box;">
        <CardHeaderAvatar>
            <MudSkeleton SkeletonType="SkeletonType.Circle" Width="8px" Height="8px" Animation="Animation.False" Class="d-inline-flex mudblazor-skeleton-white" />
            <MudSkeleton SkeletonType="SkeletonType.Circle" Width="8px" Height="8px" Animation="Animation.False" Class="d-inline-flex mudblazor-skeleton-white" />
            <MudSkeleton SkeletonType="SkeletonType.Circle" Width="8px" Height="8px" Animation="Animation.False" Class="d-inline-flex mudblazor-skeleton-white" />
        </CardHeaderAvatar>
        <CardHeaderContent>
            <MudSkeleton Animation="Animation.False" Class="mudblazor-skeleton-white" />
        </CardHeaderContent>
    </MudCardHeader>
    <MudCardContent Style="height: 300px;">
        <MudGrid>
            <MudItem xs="12" sm="12" md="3">
                <MudPaper Elevation="25" Style="background-color: rgba(0,0,0,.11); height:100%;">

                </MudPaper>
            </MudItem>
            <MudItem xs="12" sm="12" md="9">
                <MudGrid>
                    <MudItem xs="12" sm="12" md="12">
                        <MudPaper Elevation="25" Class="py-2 px-4 d-flex">
                            <MudSkeleton SkeletonType="SkeletonType.Circle" Animation="Animation.False" Height="40px" Width="40px" />
                            <div class="d-flex flex-column flex-grow-1 ml-4">
                                <MudSkeleton Width="30%" Animation="Animation.False" />
                                <MudSkeleton Width="80%" Animation="Animation.False" />
                            </div>
                        </MudPaper>
                    </MudItem>
                    <MudItem xs="12" sm="12" md="12">
                        <MudPaper Elevation="25" Class="py-2 px-4 d-flex">
                            <MudSkeleton SkeletonType="SkeletonType.Circle" Animation="Animation.False" Height="40px" Width="40px" />
                            <div class="d-flex flex-column flex-grow-1 ml-4">
                                <MudSkeleton Width="50%" Animation="Animation.False" />
                                <MudSkeleton Width="20%" Animation="Animation.False" />
                            </div>
                        </MudPaper>
                    </MudItem>
                    <MudItem xs="12" sm="12" md="4">
                        <MudPaper Elevation="25" Class="py-2 px-2 mb-2 d-flex flex-wrap justify-center">
                            <MudSkeleton Animation="Animation.False" Width="25px" Class="mx-1" />
                            <MudSkeleton Animation="Animation.False" Width="25px" Class="mx-1" />
                            <MudSkeleton Animation="Animation.False" Width="25px" Class="mx-1" />
                            <MudSkeleton Animation="Animation.False" Width="25px" Class="mx-1" />
                            <MudSkeleton Animation="Animation.False" Width="25px" Class="mx-1" />
                            <MudSkeleton Animation="Animation.False" Width="25px" Class="mx-1" />
                        </MudPaper>
                        <MudPaper Elevation="25" Class="py-2 px-2 d-flex">
                            <div class="py-2 mx-6"></div>
                        </MudPaper>
                    </MudItem>
                    <MudItem xs="12" sm="12" md="8">
                        <MudPaper Elevation="25" Style="background-color: rgba(0,0,0,.11); height:100%;">

                        </MudPaper>
                    </MudItem>
                </MudGrid>
            </MudItem>
        </MudGrid>
    </MudCardContent>
    <MudCardActions>

    </MudCardActions>
</MudCard>